import type { FC } from 'react';
import { useState, useEffect } from 'react';
import type { StateType, fakeLogin } from './service';
import styles from './index.less';
import { Form, Button, Col, Input, Popover, Progress, Row, Select, message } from 'antd';
import type { Store } from 'antd/es/form/interface';
// import { Icon } from "antd";

const FormItem = Form.Item;

const UserLogin: FC = () => {
  const [form] = Form.useForm();

  const [visible, setVisible]: [boolean, any] = useState(false);

  const loginAction = (_: any, value: string) => {
    const promise = Promise;
    // 没有值的情况
    if (!value) {
      setVisible(!!value);
      return promise.reject('请输入密码!');
    }

    alert('Login');
    // 有值的情况
    if (!visible) {
      setVisible(!!value);
    }

    // return promise.resolve();
  };

  useEffect(() => () => {});

  return (
    <div className={styles.main}>
      <h3>登录</h3>
      <Form form={form} name="UserLogin">
        <FormItem name="username" rules={[]}>
          <Input className={styles.username} size="large" placeholder="登录名：手机号或者邮箱" />
        </FormItem>
        <FormItem
          name="password"
          className={
            form.getFieldValue('password') &&
            form.getFieldValue('password').length > 0 &&
            styles.password
          }
          rules={[{}]}
        >
          <Input className={styles.password} type="password" size="large" placeholder="密码" />
          {/* <Icon  onClick={checkPassword}></Icon> */}
        </FormItem>
        <Button onClick={() => alert('log')}>登录</Button>
      </Form>
    </div>
  );
};

export default UserLogin;
